<!Doctype html>
<html>

<head>
  <title>Ext布局学习</title>
  <meta charset="utf-8">
  </meta>
  <script type="text/javascript" src="../Ext3.0/Ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../Ext3.0/Ext/ext-all.js"></script>
  <link rel="stylesheet" href="../Ext3.0/Ext/resources/css/ext-all.css" />
  <script>
    Ext.onReady(function () {

      // 垂直容器布局开始
      var box1 = new Ext.BoxComponent({
        autoEl: {
          tag: 'div',
          style: 'background:red;width:300px;height:30px',
          html: 'box1'
        }
      });
      var box2 = new Ext.BoxComponent({
        autoEl: {
          tag: 'div',
          style: 'background:yellow;width:300px;height:30px',
          html: 'box2'
        }
      });
      var box3 = new Ext.BoxComponent({
        autoEl: {
          tag: 'div',
          style: 'background:green;width:300px;height:30px',
          html: 'box3'
        }
      });
      var containerlayout = new Ext.Container({
        layout: 'form',
        items: [box1, box2, box3],
        renderTo: 'ContainerLayout'

      });
      // 垂直容器布局结束

      // 表格布局开始
      var formlayout = new Ext.Panel({
        title: '表单布局',
        layout: 'form',
        items: [
          new Ext.form.TextField({
            fieldLabel: '账号'
          }),
          new Ext.form.TextField({
            fieldLabel: '密码'
          }),
          new Ext.form.TextField({
            fieldLabel: '姓名'
          }),
        ],
        renderTo: 'FormLayout'
      });
      // 表格布局结束

      // 列布局开始
      var ColumnLayout = new Ext.Panel({
        width: 600,
        title: '列布局',
        layout: 'column',
        items: [
          new Ext.form.FormPanel({
            title: '第一列',
            columnWidth: .33,
            labelWidth: 50,
            items: [
              new Ext.form.TextField({
                fieldLabel: '用户名',
              }),
              new Ext.form.TextField({
                fieldLabel: '用户名',
              })
            ]

          }),
          new Ext.form.FormPanel({
            title: '第二列',
            columnWidth: .33,
            labelWidth: 50,
            items: [
              new Ext.form.TextField({
                fieldLabel: '密码'
              })
            ]

          }),
          new Ext.form.FormPanel({
            title: '第三列',
            columnWidth: .34,
            labelWidth: 80,
            items: [
              new Ext.form.TextField({
                fieldLabel: '重复密码'
              }),
              new Ext.form.TextField({
                fieldLabel: '重复密码'
              })
            ]

          })

        ],
        renderTo: 'ColumnLayout'
      });
      // 列布局结束

      // 盒式布局开始
      var BorderLayout = new Ext.Panel({
        title: '盒式布局',
        layout: 'border',
        width: 1100,
        height: 300,
        items: [
          new Ext.Panel({
            title: '上',
            region: 'north',
            html: '上面'
          }),
          new Ext.Panel({
            title: '下',
            region: 'south',
            html: '下面内容',
            autoEl: 'center'
          }),
          new Ext.Panel({
            title: '中间',
            region: 'center',
            html: '主面板'
          }),
          new Ext.Panel({
            title: '左',
            region: 'west',
            html: '左面部分'
          }),
          new Ext.Panel({
            title: '右',
            region: 'east',
            html: '右面部分'
          })

        ],
        renderTo: 'BorderLayout'

      });
      // 盒式布局结束

      // 折叠布局开始
      var AccordionLayout = new Ext.Panel({
        title: '折叠布局',
        layout: 'accordion',
        height: 200,
        items: [
          new Ext.Panel({
            title: '用户管理',
            items: [
              new Ext.BoxComponent({
                autoEl: {
                  tag: 'div',
                  html: '用户管理',
                },
              }),
              new Ext.BoxComponent({
                autoEl: {
                  tag: 'div',
                  html: '用户管理1',
                },
              })
            ]
          }),
          new Ext.Panel({
            title: '角色管理',
            items: [
              new Ext.BoxComponent({
                autoEl: {
                  tag: 'div',
                  html: '角色管理'
                }
              })
            ]
          }),
          new Ext.Panel({
            title: '系统管理',
            items: [
              new Ext.BoxComponent({
                autoEl: {
                  tag: 'div',
                  html: '系统管理'
                }
              })
            ]
          })
        ],
        renderTo: 'AccordionLayout'
      });
      // 折叠布局结束

      //------FitLayout结束------//

      var FitLayout = new Ext.Panel({
        title: 'FitLayout',
        height: 100,
        renderTo: 'FitLayout',
        layout: 'fit',
        items: [
          new Ext.Panel({
            bodyStyle: 'background:red',
            html: '使用了fit布局,填充满'
          }),
          new Ext.Panel({
            bodyStyle: 'background:yellow',
            html: '这个panel不会显示，因为是fit布局'
          })

        ]

      });

      var NoFitLayout = new Ext.Panel({
        title: 'NoFitLayout',
        height: 100,
        renderTo: 'FitLayout',
        items: [
          new Ext.Panel({
            bodyStyle: 'background:yellow',
            html: '未使用了fit布局,没有填充满'
          })

        ]

      });

      var TableLayout = new Ext.Panel({
        title: 'TableLayout',
        layout: 'table',
        layoutConfig: {
          columns: 3
        },
        defaults: {
          width: 133,
          height: 100,
          autoEl: 'center'

        },
        defaultType: 'panel',
        items: [{
            html: '行1列1'
          },
          {
            html: '行1列2'
          },
          {
            html: '行1列3'
          },

          {
            html: '行[1,2]列3',
            rowspan: 2,
            height: 180
          },
          // {
          //   html: '行2列[1,2]',
          //   colspan: 2,
          //   width: 266
          // }

        ],
        renderTo: 'TableLayout'

      });
      //表格布局


    });
  </script>
</head>

<body>
  <div id="ContainerLayout" style="float: left; width: 300px">
    ContainerLayout：垂直方式放置
  </div>
  <div id="FormLayout" style="float: left; width: 240px; padding-left: 10px;">
  </div>
  <div id="ColumnLayout" style="float: left; width: 500px; padding-left: 10px;">
  </div>
  <div id="BorderLayout" style="padding: 10px 0px; clear: both">
  </div>
  <div id="AccordionLayout" style="width: 300px;float: left;  height: 200px">
  </div>
  <div id="FitLayout" style="width: 300px; float: left; height: 200px; padding-left: 10px;">
  </div>
  <div id="TableLayout" style="width: 400px; float: left; padding-left: 10px;">
  </div>
</body>

</html>